<template>
  <div class="content">
    <dt-search ref="search" :labelWidth="100" @reset="onReset" v-if="type=='privacy'">
    </dt-search>

    <div class="handles">
      <Button type="primary" @click="adjustHeader">调整表头排序</Button>
      <Button type="primary" @click="exportData"
        v-if="unlocking('0213020501')">导出Excel</Button>

    </div>
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata"></dynamic-header>
    <dt-grid ref="table" :columns="columns" :page='page' :onFetch='onFetch' />
    <dt-audio ref="dtAudio" />
  </div>
</template>

<script>
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import columnOpt from './opt/callRecordColumn'
  import callSearch from './opt/callSearch'
  import businessCommonMgr from '@/biz/businessReport/businessCommon'
  import toolApi from "@/biz/base/tool";
  import receiverMgr from '@/biz/receiver/receiver'
  export default {
    components: {
      dynamicHeader,
    },
    data() {
      return {
        type: '',
        columns: [],
        sourcedata: [],
        targetdata: [],
        page: {
          current: 1,
          total: 0
        },
        formValidate: {
          companyIds: [],
          buildingId: '',
          checkTime: []
        },
        srcAudio: '',
        getListParams: {}
        // 承接


      }
    },
    created(){
      this.type = this.$route.query.type
    },
    mounted() {

      this.getColumns()
      this.$refs.table.init(this, new columnOpt(this))
      if(this.type == 'privacy'){
        this.$refs.search.init(this.$refs.table, new callSearch().options(), this
        .formValidate)
      }

    },
    methods: {
      audioPlay(val) {
        if (val.recordUrl) {
          this.$refs.dtAudio.show(val.recordUrl)
        }

      },
      audioDownload(val) {
        if (val.recordUrl) {
          toolApi.downloadFile(val.recordUrl, '音频', '',
            'audio/mpeg;audio/ogg;audio/aac;audio/wav;audio/webm', 'noHomologous');
        }

      },
      exportData() {
        if(this.type == 'LEASE'){
        // 外呼号
          receiverMgr.outCallRecordExport(this.getListParams)

        }else{
          let params = {...this.getListParams}
          params.headType =  this.type == 'TOSPUR' ? 6 : 13
          receiverMgr.callRecordListExport(params)
        }
         
      },
      adjustHeader() {
        this.$refs.dynamicHeader.show()
      },
      // 列表数据
      onFetch(data) {
        console.log(data, '55555555');
        this.getListParams = data
        if (this.type == 'TOSPUR') {
          this.getListParams.businessSource = this.type
          if (!data.buildingId) {
            if (this.$route.query.buildingId) {
              this.getListParams.buildingId = this.$route.query.buildingId
            }
          }

          if (this.$route.query.userId) {
            this.getListParams.userId = this.$route.query.userId
          }

          if (this.$route.query.delFlag) {
            this.getListParams.delFlag = this.$route.query.delFlag
          }


        } else if (this.type == 'LEASE') {
          this.getListParams.businessSource = this.type
          if (this.$route.query.userId) {
            this.getListParams.userId = this.$route.query.userId
          }
        } else {
          if (this.$route.query.privacyNumber) {
            this.getListParams.secretNo = this.$route.query.privacyNumber
          }
        }

        if (data.checkTime) {
          this.getListParams.dialEndTime = data.checkTime[1]
          this.getListParams.dialStartTime = data.checkTime[0]
        }

        if (this.type == 'LEASE') {
          return receiverMgr.outCallRecordList(this.getListParams).then(res => {
            this.page.total = res.total
            return res.records
          })
        } else {
          return receiverMgr.callRecordList(this.getListParams).then(res => {
            this.page.total = res.total
            return res.records
          })
        }

      },

      // 获取表头
      getColumns() {
        businessCommonMgr
          .reportHeadList({
            headType: this.type == 'TOSPUR' ? 6 : this.type == 'LEASE' ? 10008 : 13
          })
          .then((res) => {
            this.sourcedata = res.hideHead
            this.targetdata = res.showHead
            this.targetdata.forEach((item, index) => {
              item.disabled = item.fixed
            })
            this.columns = []
            let baseColumns = new columnOpt(this).options()
            this.targetdata.forEach(item => {
              let column = baseColumns.filter(baseItem => item.fieldKey == baseItem
                .field
              )
              if (column.length) {
                column[0].field = item.fieldKey
                this.columns.push(column[0])
              }
            })
            this.columns.push(baseColumns[baseColumns.length - 1])
            setTimeout(() => {
              this.$refs.table.fetch()

            }, 1000)
          })
          .catch((err) => {

          })
      },
      // 更新表头
      headUpdate(params) {
        businessCommonMgr
          .reportHeadUpdate({
            headType:  this.type == 'TOSPUR' ? 6 : this.type == 'LEASE' ? 10008 : 13,
            updateHead: params.updateInfo
          })
          .then((res) => {
            this.getColumns()
            this.$refs.dynamicHeader.hide()
          })
          .catch((err) => {

          })
      },

      onReset() {
        this.formValidate = {
          companyIds: [],
          buildingId: '',
          checkTime: []
        }
      },

      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },


    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;
        cursor: pointer;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p:nth-child(2n) {
          border-right: 1px #ccc solid;
        }

        p.curr2 {
          span {
            color: red;
            font-weight: bold;
          }
        }

        p.curr {
          span {
            color: #2d8cf0;
            font-weight: bold;
          }
        }


      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }
  }

  .handles {
    display: flex;

    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;

    >* {
      margin-left: 10px;

    }
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }


  // 承接人
  .tips {
    background: rgba(254, 252, 236, 1);
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;

    span {
      color: #2d8cf0;
      margin-right: 20px;
    }

  }
</style>